import React, { Component, Fragment } from 'react';
import { search, addCollect } from '../../utils/api';
import { bus } from '../../utils/eventBus';
import '../../style/all.css';
import './SearchList.css';

function qhList (cid, list, that) {
	// 歌曲
	if (cid === 0) {
		return (
			<Fragment>
				<div className='res_s_list'>
					<h2>
						<span>id</span>
						<span>音乐标题</span>
						<span>歌手</span>
						<span>收藏</span>
					</h2>
					<ul>
						{list.map((item, index) => (
							<li key={item.musicid} onClick={() => { bus.emit('syplay', { id: item.musicid }) }}>
								<span>{index + 1}</span>
								<span>{item.music_name}</span>
								<span>{item.singer_name}</span>
								<span className='red' onClick={(e) => that.addCollects(item.musicid, e)}>添加收藏</span>
							</li>
						))}
					</ul>
				</div>
			</Fragment>
		)
		// 歌单
	} else if (cid === 1) {
		return (
			<Fragment>
				<div className='res_g_list'>
					<ul>
						{list.map((item) => (
							<li className='perse25' key={item.gedanid} onClick={() => {
								let { keywords } = JSON.parse(window.sessionStorage.getItem('searchlocation'));
								window.sessionStorage.setItem('searchlocation', JSON.stringify({
									typeId: cid,
									keywords
								}))
								that.props.history.push(`/index/gedandetail?id=${item.gedanid}`);
							}}>
								<div className='img tophover'>
									<img width='100%' height='100%' src={"http://localhost:3001/" + item.gedan_pic_url} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p>{item.gedan_title}</p>
							</li>
						))}
					</ul>
				</div>
			</Fragment>)
			// mv
	} else {
		return (
			<Fragment>
				<div className='res_m_list'>
					<ul className='box'>
						{list.map((item) => (
							<li className='perse25' key={item.mvid} onClick={() => {
								let { keywords } = JSON.parse(window.sessionStorage.getItem('searchlocation'));
								window.sessionStorage.setItem('searchlocation', JSON.stringify({
									typeId: cid,
									keywords
								}))
								that.props.history.push(`/index/mvdetail?id=${item.mvid}`)
							}}>
								<div className='img tophover'>
									<img width='100%' height='100%' src={"http://localhost:3001/" + item.mv_pic_url} alt="" />
									<div className='gd_mv_hover'></div>
								</div>
								<p><span>{item.mv_name}</span><br /><span>{item.singer_name}</span></p>
							</li>
						))}
					</ul>
				</div>
			</Fragment>
		)
	}
}

export default class SearchList extends Component {
	state = {
		// 搜索关键字
		searchKeywords: '',
		// 当前搜索类型id (0歌曲 1歌单 2mv)
		currentTypeId: 0,
		// 搜索结果
		searchList: [],
		// 搜索结果长度
		currentSearchListLength: 0
	}
	componentDidMount () {
		this.firstSearch();
	}
	// 添加收藏
	async addCollects (musicid, e) {
		// 阻止冒泡
		e.stopPropagation();
		let userid = Number(window.sessionStorage.getItem('userid'));
		let addC = await addCollect(userid, 0, musicid);
		if (addC.status === 0) {
			window.alert(addC.message);
		} else {
			window.alert(addC.message);
		}
	}
	// 搜索
	async firstSearch () {
		let [keywordsStr, typeStr] = this.props.location.search.split('&');
		let keywords = keywordsStr.split('=')[1];
		let typeId = Number(typeStr.split('=')[1]);
		// 保证不会出现%的情况
		if (!keywords.includes('%')) {
			window.sessionStorage.setItem('searchlocation', JSON.stringify({
				typeId,
				keywords
			}))
		}
		// 保证不会出现%的情况
		this.setState({
			searchKeywords: JSON.parse(window.sessionStorage.getItem('searchlocation')).keywords,
			currentTypeId: JSON.parse(window.sessionStorage.getItem('searchlocation')).typeId
		}, async function () {
			let result = await search(this.state.searchKeywords, this.state.currentTypeId);
			this.setState({
				searchList: result.data,
				currentSearchListLength: result.data.length,
			})
		})
	}
	// 切换搜索类型
	async changeType (typeId) {
		let { searchKeywords } = this.state;
		let result = await search(searchKeywords, typeId);
		this.setState({
			searchList: result.data,
			searchKeywords: searchKeywords,
			currentSearchListLength: result.data.length,
			currentTypeId: typeId
		})
	}
	render () {
		let { currentTypeId, searchList, searchKeywords, currentSearchListLength } = this.state;
		return (
			<div className='search main'>
				<div className='search_title'>
					<h2>{searchKeywords}</h2>
					<span>共找到 {currentSearchListLength} 个结果</span>
				</div>
				<div className='search_res'>
					<div className='toggle_tag'>
						<ul>
							<li onClick={() => { this.changeType(0); }} className={currentTypeId === 0 ? 'active' : ''}>歌曲</li>
							<li onClick={() => { this.changeType(1); }} className={currentTypeId === 1 ? 'active' : ''}>歌单</li>
							<li onClick={() => { this.changeType(2); }} className={currentTypeId === 2 ? 'active' : ''}>MV</li>
						</ul>
					</div>
					{qhList(currentTypeId, searchList, this)}
				</div>
			</div>
		)
	}
}
